<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>裁判投票</title>
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/main.js"></script>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            font-family: 微软雅黑, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            user-select: none;
            color: #555555;
            animation-duration: 0.5s;
        }

        .presentation {
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="display: flex;">
        <div style="width: 20%;min-height: 40px; margin: auto;">
            <div class="centerText"></div>
        </div>
        <header :class="{xHeader:true}" id="head" style="width: 60%;">
            {{head}}
        </header>
        <div style="width: 20%; min-height: 40px; margin: auto;">
            <div class="centerText"></div>
        </div>
    </div>
    <div class="presentation">您已经投票给了{{status.length}}位选手, 还可以投{{limit - status.length}}位选手</div>
    <div>
        <div style="width: 61.8%;margin: auto" v-for="(item, index) in cho">
            <div :id="item.id" :ref="item.id" :selected="false" @click="vote"
                 @mouseenter="menter" @mouseleave="mleave" class="xButton xLongButton" style="margin: 18px">
                <div class="centerText">投票给<{{item.choice}}>选手</div>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            axGet: null,
            axPost: null,
            head: "公正的裁判, 请认真对待每一位选手.",
            cho: [],
            status: [],
            limit: null,
            wait:true,
            refreshIntervalId: null,
            css: {
                mleavecolor: "#555555",
                mentercolor: "#3a3f4d",
                unknownErr: "未知错误, 请重新登录或联系管理员",
                loginAlert: "请先登录",
                notStart: "投票尚未开始, 请耐心等待.如果新的一轮已经开始, 请刷新网页",
                voted: "已投票给这位选手",
                origin:"公正的裁判, 请认真对待每一位选手."
            }
        },
        methods: {
            stringify: function (obj) {
                let res = "";
                for (let pro in obj)
                    res += "&" + pro + "=" + obj[pro];
                return res.substr(1);
            },
            contain: function (arr, item) {
                if (arr.length === 0) return false;
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i] === item) return true;
                }
                return false;
            },
            refresh: function () {
                this.refreshIntervalId = setInterval(() => {
                    this.axGet
                        .get("/judge/status", {
                            params: {}
                        })
                        .then(resp => {
                            if (resp.data.status === false) {
                                if (resp.data.value === "login") {
                                    alert(this.css.loginAlert)
                                    window.location.href = "index.html";
                                }
                                if (resp.data.value === "notStart") {
                                    this.head = this.css.notStart;
                                    this.wait = true;
                                    return;
                                }
                                this.head = this.css.unknownErr;
                            }
                            this.wait = false;
                            this.head = this.css.origin;
                            this.cho = resp.data.value.choices;
                            this.status = resp.data.value.status;
                            this.limit = resp.data.value.limit;
                            for (let i = 0; i < this.status.length; i++)
                                this.status[i] = this.status[i].toString();
                            for (let i = 0; i < this.status.length; i++) {
                                this.$refs[this.status[i]][0].style.backgroundColor = "#afafaf";
                                this.$refs[this.status[i]][0].firstChild.innerHTML = this.css.voted;
                            }
                        })
                        .catch(err => {
                            this.head = this.css.unknownErr;
                        });
                }, 1500);
            },

            menter: function (obj) {
                if (this.contain(this.status, obj.currentTarget.id)) return;
                obj.currentTarget.style.backgroundColor = this.css.mentercolor;
            },
            mleave: function (obj) {
                if (this.contain(this.status, obj.currentTarget.id)) return;
                obj.currentTarget.style.backgroundColor = this.css.mleavecolor;
            },
            vote: function (obj) {
                if(this.wait) return;
                if (this.contain(this.status, obj.currentTarget.id)) return;
                this.status.push(obj.currentTarget.id);
                this.axPost.post("/judge/vote", this.stringify({
                    id: obj.currentTarget.id
                }), {
                    headers: {'Content-Type': 'application/x-www-form-urlencoded',}
                }).then(()=>{
                    obj.currentTarget.style.backgroundColor = "#afafaf";
                    obj.currentTarget.firstChild.innerHtml = this.css.voted;
                }).catch(err=>{
                    //this.head = this.css.unknownErr;
                })
            }
        },
        created: function () {
            this.axGet = axios.create({
                url: window.location.host,
                method: "get",
                responseType: 'json'
            });
            this.axPost = axios.create({
                url: window.location.host,
                method: "post",
                responseType: "json",
                contentType: "application/x-www-form-urlencoded"
            });
            this.axGet
                .get("/captcha/login", {
                    params: {}
                })
                .then(resp => {
                    if (resp.data.status === false) {
                        alert(this.css.loginAlert)
                        window.location.href = "index.html";
                    }
                })
                .catch(err => {
                    window.location.href = "index.html";
                });
            this.refresh();
        }
    });
</script>
</body>
</html>
